<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 200px;
            height: 80px;
            background: pink;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="box"></div>

<script>
    window.onload = function () {
        const dom = document.querySelector(".box")
        dom.addEventListener("click", function () {
            console.log('点击事件')
        })

        dom.addEventListener("mouseover", function () {
            console.log('鼠标移入事件')
        })

        dom.addEventListener("mouseout", function () {
            console.log('鼠标移出事件')
        })

        dom.addEventListener("mousemove", function () {
            console.log('鼠标移动事件')
        })

        dom.addEventListener("mousedown", function () {
            console.log('鼠标按下事件')
        })

        dom.addEventListener("mouseup", function () {
            console.log('鼠标松开事件')
        })

        dom.addEventListener("mouseenter", function () {
            console.log('鼠标进入事件')
        })

        for (var i = 0; i < 5; i++) { // var 和 let
            setTimeout(function () {
                console.log(new Date(), i)
            }, 1000)
        }


        // 实现按顺序输出 该当一
        for (var i = 0; i < 5; i++) {
            (function (j) {
                setTimeout(() => {
                    console.log("code 1 :",new Date(), j)
                }, 1000)
            })(i)
        }

        // 方法二，按值传递
        function output(k) {
            setTimeout(() => {
                console.log("code 2 :",new Date() ,k)
            }, 1000)
        }

        for (var i = 0; i < 5; i++) {
            output(i)
        }

        // 方法三， let, 无法打印i = 5 的情况

        // 方法四，promise

        // 方法五，async/await

        let arr = [
            {name:'jack',num:10},
            {name:'jack2',num:20},
            {name:'jack3',num:50},
        ]

        console.log("reduce: " , arr.reduce((x,y)=>x+y.num,0))
    }
</script>
</body>
</html>
